<template>
  <div class="Register flex-center">
   <div class="container flex-center">
     <div id="Register" class="content">
       <div class="title flex-align">
        <h1>注册</h1>
      </div>
        <div class="form-box">
          <el-form :model="RegisterForm">
         <el-form-item>
              <el-col :span="3">
              <img src="../../assets/imgs/person.png">
              </el-col>
              <el-col :span="21">
              <el-input v-model="RegisterForm.userName" placeholder="请输入你的姓名"></el-input>
              </el-col>
          </el-form-item>
          <el-form-item>
               <el-col :offset="3">
               <el-radio v-model="radio" label="man">男</el-radio>
               <el-radio v-model="radio" label="woman">女</el-radio>
               </el-col>
          </el-form-item>
          <el-form-item>
                <el-col :span="3">
                 <img src="../../assets/imgs/phone.png">
                </el-col>
                 <el-col :span="21">
                 <el-input v-model="RegisterForm.phone" placeholder="请输入手机号码"></el-input>
                 </el-col>
          </el-form-item>
          <el-form-item>
            <el-col :span="3">
              <img src="../../assets/imgs/block2.png">
            </el-col>
            <el-col :span="21">
              <el-input v-model="RegisterForm.passward" placeholder="请输入密码"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item>
                  <el-col :span="21" offset="3">
                  <el-input v-model="RegisterForm.repassward" placeholder="请确认你的密码"></el-input>
                  </el-col>
          </el-form-item>
          <el-form-item>
                  <el-col :offset="3">
                  <el-button  id="register-button" type="primary">注册完成</el-button>
                  </el-col>
          </el-form-item>
          <el-link id="rere" :underline="false">已有账号，去登录</el-link>
        </el-form>        
      </div> 
     </div>
   </div>
  </div>

</template>




<script>
export default {
  name: 'ZhuceView',
  data() {
    return {
      input: '',
      radio: ''
      ,RegisterForm: {
          userName: '',
          passward: '',
        },
    }
  }
}

</script>

<style lang="less" scoped>
.Register {
  width: 100%;
  height: 100%;
  min-height: fit-content;
  background: url('@/assets/imgs/background.jpg') no-repeat center;
  background-size: cover;
  }
.container {
    max-width: 1059px;
    width: 63%;
    max-height: 674px;
    height: 80%;
    background-color: #fff;
    border: solid 1px #666666;

  }
  .content {
    margin-top: 130px;
    width: 405px;
    height: 510px;
   //background-color: pink;
}
  h1 {
    margin-bottom: 30px;
    font-size: 24px;
    font-weight: 400;
    color: black;
    text-align: center;
  }

  .el-form-item {
    height: 40px;
  /*margin-bottom: 36px !important;*/
    margin-bottom: 4% !important;
  }
  

  #register-button {
  background-color: #00CCCC;
  color: #fff;
  width: 363px;
  height: 40px;
  }
  #rere{
    color: #00CCCC;
    margin-left: 165px;
    margin-bottom: 50px;
  }

</style>